<template>
  <div>
    <div class="navbar-div">
      <van-nav-bar title="类别列表" />
    </div>
    <div>
      <van-row>
        <van-col span="6">
          <div class="leftNav">
            <ul>
              <li @click="clickIndex(index,item.ID)"  
              :class="{active:categoryIndex==index}"
              v-for="(item,index) in category" 
              :key="index">
                {{item.MALL_CATEGORY_NAME}}
              </li>
            </ul>
          </div>
        </van-col>
        <van-col span="18">
          <!-- <div class="rightList"> -->
            <div class="tabCategorySub" >
              <van-tabs v-model="active" @click="onClickCategorySub">
                <van-tab v-for="(item,index) in categorySub" 
                :key="index"
                :title="item.MALL_SUB_NAME"
                >
                </van-tab>
              </van-tabs>
            </div>
            <div id="list-div">
              <van-pull-refresh v-model="isRefresh" @refresh="onRefresh">
                <van-list 
                v-model="loading" 
                :finished="finished" 
                @load="onLoad">
                  <div class="list-item" @click="goGoodsInfo(item.ID)" v-for="(item,index) in goodsList" :key="index">
                    <div class="list-item-img">
                      <img :src="item.IMAGE1" width="100%"
                      :onerror="errorImg">
                      <!-- 图片失效的替补图片 onerror -->
                    </div>
                    <div class="list-item-text">
                      <div>{{item.NAME}}</div>
                      <div>￥{{item.ORI_PRICE}}</div>
                    </div>
                  </div>
                </van-list>
              </van-pull-refresh>
            </div>
          <!-- </div> -->
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import url from '@/serviceAPI.config.js'
import { Toast } from 'vant'
import {toMoney} from '@/filter/moneyFilter'
  export default {
    data() {
      return {
        category:[],//大类
        categoryIndex:0,
        active:0,//vant激活标签的值
        categorySub:[],//小类
        loading:false,
        finished:false,//上拉加载是否有数据
        list:[],//商品数据
        page:1,//商品列表的页数
        goodsList:[],//商品列表信息
        categorySubId:'',//商品子类ID
        isRefresh:false,//下拉刷新
        errorImg:'this.src="'+require('@/assets/img/3.jpg')+'"',
      }
    },
    created(){
      this.getCategory()
    },
    // mounted(){
    //   let winHeight = document.documentElement.clientHeight
    //   document.getElementById('list-div').style.height = winHeight - 90 + "px"
    // },
    methods:{
      getCategory(){
        axios({
          url:url.getCategoryList,
          method:'get',
        }).then(response=>{
          // console.log(response)
          if(response.data.code ==200 && response.data.message){
            this.category = response.data.message
            this.getCategorySubByCategoryID(this.category[0].ID)
          }else{
            Toast('获取数据出错')
          }
        }).catch(err=>{
          console.log(err)
        })
      },
      clickIndex(index,id){
        this.categoryIndex = index
        this.page = 1
        this.finished = false
        this.goodsList = []
        this.getCategorySubByCategoryID(id)
      },
      // 根据大类获取小类类别列表
      getCategorySubByCategoryID(categoryId){
        axios({
          url:url.getCategorySubList,
          method:'post',
          data:{
            categoryId:categoryId
          }
        }).then(response=>{
          console.log(response)
          if(response.data.code == 200 && response.data.message){
            this.categorySub = response.data.message
            this.active = 0
            this.categorySubId = this.categorySub[0].ID
            this.onLoad()
          }else{
            Toast('获取数据出错')
          }
        }).catch(err=>{
          console.log(err)
        })
      },
      //上拉加载
      onLoad(){
        setTimeout(()=>{
          this.categorySubId = this.categorySubId ? this.categorySubId:this.categorySub[0].ID
          this.getGoodList()
        },500)
      },
      //下拉刷新
      onRefresh(){
        setTimeout(()=>{
          this.isRefresh=false
          this.finished = false
          this.goodsList = []
          this.page = 1
          this.onLoad()
        },500)
      },
      getGoodList(){
        axios({
          url:url.getGoodsListByCategorySubID,
          method:'post',
          data:{
            categorySubId:this.categorySubId,
            page:this.page
          },
        }).then(response=>{
          console.log(response)
          if(response.data.code==200&&response.data.message.length){
            this.page++
            //concat 用于连接两个数组
            this.goodsList = this.goodsList.concat(response.data.message)
          }else{
            this.finished = true
          }
          this.loading = false
        }).catch(err=>{
          console.log(err)
        })
      },
      onClickCategorySub(index,title){
        this.categorySubId = this.categorySub[index].ID
        this.goodsList = []
        this.finished = false
        this.page = 1
        this.onLoad()
      },
      //跳转到商品详细页
      goGoodsInfo(id){
        //$router跳转是使用name跳转用params传输数据
        //$router跳转是使用path跳转用query传输数据
        this.$router.push({name:'Goods',params:{goodsId:id}})
      },
    },
  }
</script>

<style scoped>
.leftNav,.rightList{
  background: aliceblue;
  height: calc(100vh - 46px);
  box-sizing: border-box;
  /* overflow: hidden; */
}
.leftNav ul li{
  list-style: none;
  line-height: 2rem;
  border-bottom: 1px solid #e4e7ed;
  padding: 3px;
  font-size: .8rem;
  text-align: center;
}
.active{
  background: #fff;
}
#list-div{
  overflow: hidden;
  height: calc(100vh - 90px);
}
.list-item{
  display: flex;
  font-size: .8rem;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
  padding: 5px;
}
.list-item-img{
  flex: 8;
}
.list-item-text{
  flex: 16;
  margin-top: 10px;
  margin-left: 10px;
}
</style>